<template>
 <ul class="list">
   <li class="item" 
       v-for="item of letters"
       :key="item"
       :ref="item"
       @touchstart.prevent='handleTouchStart'
       @touchmove='handleTouchMove'
       @touchEnd='handleTouchEnd'
       @click="handleLetterClick"
       >
       {{item}}
   </li>
 </ul>
</template>

<script>
export default {
	name: 'CityAlphabet',
   props: {
      cities: Object
   },
   data() {
      return {
         touchStatus: false,
         startY: 0, 
         timer: null //函数截留：为了实现下面鼠标在字母移动时频率不要太快
      }
   },
   updated () {
      this.startY = this.$refs['A'][0].offsetTop
   },
   computed: {
      letters () {
         const letters = []
         for (let i in this.cities) {
            letters.push(i)
         }
         return letters
      }
   },
   methods: {
      handleLetterClick (e) {
         this.$emit('change',e.target.innerText)
      },
      handleTouchStart () {
         this.touchStatus = true
      },
      handleTouchMove (e) {
         if (this.touchStatus) {
            if (this.timer) {
               clearTimeout(this.timer)
            }
            this.timer = setTimeout( () =>{
               const TouchY = e.touches[0].clientY-79
               const index = Math.floor(TouchY - this.startY)/20
               if (index >= 0 && index < this.letters.length) {
                  this.$emit('change',this.letters[index])
               }
            },16)
         }
      },
      handleTouchEnd () {
         this.touchStatus = false
      }
   }
}
</script>

<style lang="stylus" scoped>
 @import '~styles/varibles.styl'
 .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    color: $bgColor
    .item
       line-height: .4rem
       text-align: center
</style>